<template>
	<view class="ljapp my-withdraw-log">
		<view class="header">
			<view class="tabsbox">
				<u-tabs :list="tabslist" :activeStyle="{color: '#00b7ee'}" lineColor="#00b7ee" :current="tab" :scrollable="false" @click="chageTab"></u-tabs>
			</view>
			
			<view class="tit u-flex u-flex-between">
				<view class="year u-flex" @click="openDate">
					<view class="datenum">{{year}}年{{month}}月</view>
					<u-icon name="arrow-down" size="14" color="#333333"></u-icon>
				</view>
				<view class="money">提现 ￥{{total_money}}</view>
			</view>
			
			<u-datetime-picker ref="datetimePicker" mode="year-month" :show="showDate" v-model="dateVal" @cancel="showDate=false" @confirm="changeDate"></u-datetime-picker>
		</view>
		
		<view class="content">
			<view class="list">
				<view class="item" v-for="(item,index) in group.list" :key="index">
					<view class="top">
						<view class="u-flex u-flex-between">
							<view class="u-flex-fill">提现单号：{{item.order_code}}</view>
							<view class="status text-warning" v-if="item.status=='normal'">待审核</view>
							<block v-else-if="item.status=='yes'">
								<view class="status text-success" v-if="item.pay_status==1">已通过已打款</view>
								<view class="status text-success" v-else>已通过<text class="text-danger">未打款</text></view>
							</block>
							<view class="status text-danger" v-else-if="item.status=='reject'">未通过已退回</view>
							<view class="status text-danger" v-else-if="item.status=='hidden'">已取消</view>
						</view>
						<view class="memo" v-if="item.status=='reject'">备注：{{item.reason}}</view>
					</view>
					
					<view class="bottom u-flex u-flex-between">
						<view class="u-flex">
							<view class="time">{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss')}}</view>
							<view class="type">
								<block v-if="item.payway=='wx'">微信</block>
								<block v-else-if="item.payway=='ali'">支付宝</block>
							</view>
						</view>
						<view>申请提现金额：<text class="text-warning">{{item.money}}</text>元</view>
					</view>
				</view>
				
				<u-loadmore
					:status="loading?'loading':(group.loaded?'nomore':'loadmore')"
					fontSize="12"
					color="#ccc"
					nomoreText="已加载全部"
					marginTop="30rpx"
					marginBottom="0"
					@loadmore="getList"
				></u-loadmore>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tabslist: [
					{
						name: '全部',
					},
					{
						name: '待审核',
					},
					{
						name: '已通过',
					},
					{
						name: '未通过',
					}
				],
				tab: 0,
				
				showDate: false,
				yearmonth: '',
				dateVal: Number(new Date()),
				year: '',
				month: '',
				
				total_money: 0,
				group:{
					page: 1,
					limit: 10,
					list: [],
					loaded: false
				},
				loading: false,
				
				tab: 0,
			}
		},
		onShow() {
			var myDate = new Date();
			this.year = myDate.getFullYear();
			this.month = myDate.getMonth()+1;
			this.yearmonth = this.year+'-'+this.month;
			
			this.init();
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},
			chageTab(e){
				if(this.tab == e.index) return
				
				this.tab = e.index
				
				this.init()
			},
			init(){
				var that = this, status = '', flagTab = that.tab;
				if(that.tab==1) status = 'normal';
				if(that.tab==2) status = 'yes';
				if(that.tab==3) status = 'reject';
				
				that.total_money = 0
				
				this.$Http({
					url: 'getWithdrawTotalMoney',
					data: {
						yearmonth: this.yearmonth,
						status: status
					},
					type:'POST',
				}).then(res=>{
					if(res.code == 1 && flagTab==that.tab){
						that.total_money = res.data
					}
				});
				
				this.group.page = 1
				this.group.list = []
				this.group.loaded = false
				this.loading = false
			
				this.getList()
			},
			getList(){
				var that = this, group = that.group, flagTab = that.tab;
				if(that.loading || group.loaded) return;
			
				that.loading = true
				
				var status = '';
				if(that.tab==1) status = 'normal';
				if(that.tab==2) status = 'yes';
				if(that.tab==3) status = 'reject';
			
				this.$Http({
					url: 'getWithdrawLog',
					data: {
						page: group.page,
						limit: group.limit,
						yearmonth: this.yearmonth,
						status: status
					},
					type:'POST',
				}).then(res=>{
					if(res.code == 1 && flagTab==that.tab){
						var list = res.data;
						group.loaded = list.length < group.limit;
						group.page ++;
						group.list = group.list.concat(list);
					}
					
					that.loading = false
				}).catch(()=>{
					that.loading = false
				});
			},
			changeDate(e){
				console.log(e)
				var myDate = new Date(e.value);
				this.year = myDate.getFullYear();
				this.month = myDate.getMonth()+1;
				this.yearmonth = this.year+'-'+this.month;
				this.showDate = false
				this.init()
			},
			openDate(e){
				this.$refs.datetimePicker.setDate(Number(new Date(this.year+'/'+this.month+'/01').getTime()))
				this.showDate = true
			}
		}
	}
</script>

<style lang="less">
	@import '@/pagesL/style.less';
</style>
